<template>
    <div class="e-form">
        <BillTop @cancel="printHandel"></BillTop>
        <div class="tabs">
            <div class="tabs-title">基本信息</div>
            <!-- {{webData}} -->
             <el-form ref="ruleForm" :model="formData" label-width="160px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="结算编号：" >
                           {{formData.billNo}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="机构：">
                           {{formData.orgName}}
                         </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="业务类型：">
                         {{formData.businessTypeValue}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="源单编号：">
                        <span>{{formData.sourceNo}}</span>
                         <span class="a"
                        @click="seeSourceOrder">查看</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="结算单位：">
                          {{formData.settleOrgName}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="结算类型：">
                         {{setSettleType}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="发票号：">
                           {{formData.invoiceNo}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="录入人员：">
                          {{formData.inputName}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="不含税金额(元)：" >
                             {{formData.taxExcluding}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                         <el-form-item label="结算日期：">
                            {{formData.settleDate}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="税率：">
                            {{formData.taxRate}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="税价合计：">
                            {{formData.totalTaxPrice}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="税额：">
                          {{formData.taxAmount}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="累计结算金额：">
                            {{formData.cumulativeSettleAmount}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="服务费用(含税)：" >
                        {{formData.transportUnitCost}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="单据来源：">
                          {{ billSourceData }}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="冲预付款金额(元)：">
                              <el-checkbox disabled v-model="checkedBox">
                                    <span>{{formData.advanceChargeAmount}}</span>
                              </el-checkbox>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="验收编号：">
                          {{ formData.acceptanceNo }}
                         <span class="a"
                         @click="seeAcceptanceNumber">查看</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="冲个人借支：" >
                            <el-checkbox disabled
                            v-model="isTickPersonalBorrowing"></el-checkbox>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="终期结算：">
                            <el-checkbox disabled v-model="formData.isFinalSettle"
                            ></el-checkbox>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="冲个人借支金额(元)：" >
                          {{formData.rushPersonalBorrowingAmount}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="币种：">
                          {{formData.currency}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="冲销对象：" >
                           {{formData.reversalObjectName}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="本位币：">
                            {{ formData.baseCurName}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="本位币汇率：">
                        {{formData.baseCurRate}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="人名币汇率：" >
                            {{formData.rmbRate}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="借支人员：" >
                         {{formData.borrower}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="结算金额(本位币)：" >
                            {{formData.baseCurAmount}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                     <el-col :span="12">
                        <el-form-item label="状态：" >
                            {{stateLable(formData.state)}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="传输财务共享：">
                            <span :class="isFontColor ? 'redFont' : 'greenFont'">{{shareLable(formData.transferFinancialShare)}}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备注：">
                            <el-input placeholder="" v-model="formData.remarks" class="input-with-select" type="textarea"
                            :rows="3">
                            <span>
                                {{formData.remarks}}
                            </span>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                </el-form>
        </div>
        <div class="buttons buttonsDiv">
            <el-button
                type="primary"
                size="small"
                class="btn-blue"
                @click="preserve"
                v-debounce
                >保存</el-button
            >
            <el-button size="small" @click="printHandel"  v-debounce>取消</el-button>
        </div>
    </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import '@/utils/jquery.scrollTo.min'
import request from '@/api/settlementManagement/weeklyMaterialSettlement/purchaseSettlement.js'
import { hideLoading, openAppClient } from '@/utils/common'
export default {
    data () {
        return {
            isFontColor: true,
            checkedBox: false, //冲预付款金额勾选参数
            formData: {
            },
            acceptanceData: [
                {
                    'children': [],
                    'topClassId': '',
                    'topClassName': '',
                    'totalAmount': 0,
                    'totalQuantity': 0,
                    'uuid': '12348asdzxxcuiwi'
                }
            ], //选择物资 结算明细
            tableDataBzj: [], // 保证金
            billId: this.$route.query.billid,
            billType: 6095,
            tableDataService: [], // 服务费用明细
            //是否勾选冲个人借支
            isTickPersonalBorrowing: false,
            webData: ''
        }
    },
    computed: {
        ...mapState({
            userInfo: state => state.userInfo,
        }),
        //根据状态值参数决定是否展示打印按钮
        stateLable () {
            return param=> {
                const state =  this.$store.state.equip.equipData.state
                const obj = state.find(x=>x.value == param)
                return (obj ?  obj.label :  '')
            }
        },
        //传输财务共享
        shareLable () {
            return param=> {
                const state =  this.$store.state.equip.equipData.shareFrom
                const obj = state.find(x=>x.value === param)
                return (obj ?  obj.label :  '')
            }
        },
        //当前单据状态
        state () {
            return this.formData.state
        },
        //---------------基本信息-----------------//
        //当前单据来源
        billSourceData () {
            const obj = {
                0: '新增',
                1: '验结一体'
            }
            return obj[this.formData.billSource]
        },
        //当前结算类型
        setSettleType () {
            const obj = {
                1: '内部列账',
                2: '外来发票',
            }
            return obj[this.formData.settleType]
        },
    },
    created () {
        this.billId = this.$route.query.billid
        this.userId = localStorage.getItem('userId')
    },
    mounted () {
        this.init()
    },
    beforeDestroy () {
        window.removeEventListener('scroll', this.winEvent.onScroll)
        window.removeEventListener('resize', this.winEvent.onResize)
    },
    methods: {
        ...mapMutations(['setSelectedInfo', 'setAuditParams']),
        //查看源单页面
        seeSourceOrder () {
            const urlObj = {
                '临时需用计划': '/momentNeedPlanShow',
                '物资采购合同': '/ctMaterialApplyShow',
                '调拨单': '/revolveAllocationShow'
            }
            const url = urlObj[this.formData.businessTypeValue]
            const billid = this.formData.sourceId
            openAppClient(
            `${url}?billid=${billid}&isview=true`, `${this.formData.businessTypeValue}`
            )
        },
        //查看验收编号
        seeAcceptanceNumber () {
            openAppClient(
            `/weeklyMaterialAccDetail?billid=${this.formData.acceptanceId}&isview=true`, '查看周材验收'
            )
        },
        //初始化数据
        init () {
            Promise.all([
                this.initRedData(),
            ]).finally(() => {
                hideLoading()
            })
        },
        //获取红单初始化信息
        async initRedData () {
            const res = await request.initializationRed({ billId: this.billId })
            this.checkedBox = !!res.isRushAdvanceCharge
            this.isTickPersonalBorrowing = !!res.rushPersonalBorrowing
            this.formData = { ...res, isFinalSettle: !!res.isFinalSettle, baseCurAmount: 0 - res.baseCurAmount, transportUnitCost: res.transportUnitCost > 0 ? 0 - res.transportUnitCost : res.transportUnitCost }
        },
        //操作成功后返回列表页面
        printHandel () {
            this.$router.replace('/purchaseSettlementList')
        },
        //保存
        preserve () {
            this.formData.businessTypeKey = Number(this.formData.businessTypeKey)
            this.formData.redState = 3
            this.formData.advanceChargeAmountNotNull = this.formData.advanceChargeAmountNotNull ? 1 : 0
            this.formData.isFinalSettle = this.formData.isFinalSettle ? 1 : 0
            this.formData.billSource = 0
            this.webData = this.formData
            request.addPurchaseSettlementData(this.formData)
                .then(res=>{
                    this.clientPop('info', '保存成功!是否进行下一步操作？', ()=>{
                        this.$router.replace({
                            path: '/purchaseSettlementRed',
                            query: {
                                billid: res,
                            }
                        })
                    },
                    null,
                    this.printHandel
                    )
                })
        },
    },
}
</script>

<style lang="scss" scoped>
.form {
    margin-top: 10px;
}

.e-table {
    background: #fff;
}
.mainTitle {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    line-height: 40px;
    background: rgb(246, 246, 246);
    border: 1px solid rgb(236, 236, 236);
    margin: auto;
    margin-bottom: 15px;
    padding-left: 10px;
}
.errMessageBox {
    background-color: #fff;
}
.errMessage {
    margin-bottom: 0;
    color: red;
    font-size: 14px;
}
.buttonsDiv {
    background-color: #fff;
}
// ::v-deep input.el-input__inner {
//     border: 0;
// }
</style>
